<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style type="text/css">
			p {
				color: white;
				font-size: 20px;
			}

			.flex-container {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				background-color: black;
				width: 100%;
				height: 70px;
				align-items: center;
			}

			.flex-item {
				background-color: black;
				flex-direction: row;
				height: 70px;
				width: 25%;
				align-items: center;
			}

			a:link{
				text-decoration: none;
				color: white;
				font-size: 20px;
				background-color: orange;
			}
			a:visited{
				text-decoration: none;
				color: white;
				font-size: 20px;
			}
			a :hover{
				text-decoration: none;
				color: white;
				font-size: 20px;
				background-color: red;
			}
			a:active{
				text-decoration: none;
				color: white;
				font-size: 20px;
				background-color: red;
			}
			.dropdown {
				position: relative;
				display: inline-block;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: orange;
				min-width: 80px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
				padding: 12px 16px;
				z-index: 1;
			}

			.dropdown:hover .dropdown-content {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="flex-item">
				<div class="dropdown">
					<p><span>本站</span></p>
					<div class="dropdown-content">
						<p><a href="#">时间轴</a></p>
						<p><a href="#">分类</a></p>
						<p><a href="#">标签</a></p>
					</div>
				</div>
			</div>

			<div class="flex-item">
				<div class="dropdown">
					<p><span>友链</span></p>
					<div class="dropdown-content">
						<p><a href="#">添加友链</a></p>
						<p><a href="#">编辑友链</a></p>
						<p><a href="#">管理友链</a></p>
					</div>
				</div>
			</div>

			<div class="flex-item">
				<div class="dropdown">
					<p><span>我的</span></p>
					<div class="dropdown-content">
						<p><a href="#">账号信息</a></p>
						<p><a href="#">浏览历史</a></p>
						<p><a href="#">设置</a></p>
					</div>
				</div>
			</div>

			<div class="flex-item">
				<div class="dropdown">
					<p><span>关于</span></p>
					<div class="dropdown-content">
						<p><a href="#">help</a></p>
						<p><a href="#">使用查询</a></p>
						<p><a href="#">反馈</a></p>
					</div>
				</div>
			</div>
		</div>
</html>
